// 弹窗复选
import React, { useEffect } from 'react';
import { Button, Modal, Checkbox, DatePicker, Input } from 'antd';
import styles from './index.less';
import { useTRState } from '#/utils/trHooks.jsx';
import { TRDefault } from '@/components/index.js';
import { RightOutlined, SearchOutlined } from '#/utils/antdIcons.js';
const CheckboxGroup = Checkbox.Group;
const { RangePicker } = DatePicker;
/* 
  filterList =[{
    label: "场站", // 筛选类名
    list: ["选项一"，...], // 
    hasSearch: true // 是否显示搜索框
  }]
*/
const TjGreenSelect = (props) => {
  const { visible, filterList, onClose } = props;
  const [state, setState] = useTRState({
    filterList: [],
    filterIndex: 0,
  });
  useEffect(() => {
    if (filterList.length > 0) {
      setState({
        filterList: filterList.map((item) => {
          return { allSelect: false, value: [], ...item };
        }),
      });
    }
  }, [filterList]);
  const onCheckAllChange = (e) => {
    onChange(e.target.checked ? state.filterList[state.filterIndex].list : []);
  };
  const onChange = (list) => {
    let arr = [...state.filterList];
    arr[state.filterIndex].allSelect = list.length === arr[state.filterIndex].list.length;
    arr[state.filterIndex].value = list;
    setState({
      filterList: arr,
    });
  };
  const onChangeDate = (value, dateString) => {
    let arr = [...state.filterList];
    arr[state.filterIndex].value = dateString;
    arr[state.filterIndex].moments = value;
    setState({
      filterList: arr,
    });
  };
  const _isChinese = (s) => {
    // 中文全匹配
    var ret = true;
    for (var i = 0; i < s.length; i++) ret = ret && s.charCodeAt(i) >= 10000;
    return ret;
  };
  const onSearch = (e) => {
    const { value } = e.target;
    let arr = [...state.filterList];
    let item = arr[state.filterIndex];
    if (!item.originList) {
      item.originList = item.list;
    }
    if (value != '') {
      item.list = [];
      if (value && _isChinese(value)) {
        item.originList.map((x) => {
          if (x.indexOf(value) > -1) item.list.push(x);
        });
      }
    } else {
      item.list = item.originList;
      item.allSelect = item.list.length === item.value.length;
    }
    arr[state.filterIndex] = item;
    setState({
      filterList: arr,
    });
  };
  const onClear = (e) => {
    let arr = state.filterList.map((item) => {
      let obj = {
        ...item,
        value: [],
      };
      if (item.label == '日期') {
        obj.moments = null;
      } else if (item.label == '场站') {
        obj.list = item?.originList || obj.list;
        obj.allSelect = false;
      } else {
        obj.allSelect = false;
      }
      return obj;
    });
    setState({
      filterList: arr,
    });
  };
  return (
    <Modal
      width="480"
      className={styles.modal}
      centered={true}
      visible={visible}
      maskClosable={false}
      getContainer={false}
      destroyOnClose={true}
      closable={false}
      footer={[
        <Button key="back" onClick={onClear}>
          清空
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={() => {
            onClose(state.filterList);
          }}
        >
          确定
        </Button>,
      ]}
    >
      {state.filterList.length > 0 ? (
        <div className={styles.content}>
          <div className={styles.right}>
            <div className={styles.right_title}>选择一个筛选条件</div>
            <div className={styles.right_box}>
              {filterList.map((item, index) => (
                <div
                  className={[
                    styles.right_label,
                    state.filterIndex == index ? styles.active : '',
                  ].join(' ')}
                  onClick={() => setState({ filterIndex: index })}
                >
                  <div>{item.label}</div>
                  <RightOutlined className={styles.rightIcon} />
                </div>
              ))}
            </div>
          </div>
          <div className={styles.left}>
            <div className={styles.left_title}>{state.filterList[state.filterIndex].label}</div>
            <div className={styles.left_box}>
              {state.filterList[state.filterIndex].label !== '日期' ? (
                <div className={styles.left_content}>
                  {!!state.filterList[state.filterIndex]?.hasSearch && (
                    <Input
                      placeholder="搜索"
                      suffix={<SearchOutlined />}
                      allowClear={true}
                      onChange={onSearch}
                    />
                  )}
                  {state.filterList[state.filterIndex].list.length > 0 && (
                    <Checkbox
                      onChange={onCheckAllChange}
                      checked={state.filterList[state.filterIndex].allSelect}
                    >
                      全选
                    </Checkbox>
                  )}
                  <CheckboxGroup
                    className={styles.radio_box}
                    options={state.filterList[state.filterIndex].list}
                    value={state.filterList[state.filterIndex].value}
                    onChange={onChange}
                  />
                </div>
              ) : (
                <RangePicker
                  className={styles.rangePicker}
                  picker="month"
                  showTime={{ format: 'HH:mm' }}
                  value={state.filterList[state.filterIndex]?.moments || null}
                  onChange={onChangeDate}
                />
              )}
            </div>
          </div>
        </div>
      ) : (
        <TRDefault type="lock" />
      )}
    </Modal>
  );
};

export default TjGreenSelect;
